<template>
    <div>
表格导航

        <!-- 显示商品列表 -->
        <ul>
            <li v-for="good in goodsStore.goodsList" :key="good.id">
                {{ good.name }} - 价格： {{ good.price }} - 数量： {{ good.count }}
            </li>
        </ul>
        <!-- 显示商品总数 -->
        <p>商品总数: {{ goodsStore.totalGoods }}</p>
        <!-- 显示商品总价 -->
        <p>商品总价: {{ goodsStore.totalPrice }}</p>
        <!-- 显示商品完整信息 -->
        <pre>{{ goodsStore.fullInfo.join('\n') }}</pre>
        <button @click="addNewGood">添加商品</button>
    </div>
</template>

<script setup>
// 获取 goodsStore 实例
import { useGoodsStore } from '@/stores/index.js';
const goodsStore = useGoodsStore();

// 定义一个方法来添加新商品
const addNewGood = () => {
    const newGood = {
        id: goodsStore.goodsList.length + 1,
        name: `商品${goodsStore.goodsList.length + 1}`,
        price: Math.random() * 100,
        count: Math.floor(Math.random() * 10) + 1,
    };
    goodsStore.addGood(newGood);
};
</script>

<style  scoped>
.div{
    position: fixed;
    left:0;
    bottom:0;
    width: 100%;
    height: 50px;
    border-top:1px solid pink;
    display:flex;
    justify-content: space-around;
    align-items: center;

}
</style>